<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	#ul1 {background: green;}
	#ul2 {background: yellow;}
</style>
<script>
window.onload = function()
{
		var oUl1 = document.getElementById('ul1');
		var oUl2 = document.getElementById('ul2');
		var oBtn = document.getElementById('btn1');
	
		oBtn.onclick =function()
		{
				var oLi = oUl1.children[0];
				
				//oUl1.removeChild(oLi);
				oUl2.appendChild(oLi);    //appendChild: 1.先把元素从原有父级上删掉	2.添加到新的父级
		};
};
</script>
</head>

<body>
<ul id="ul1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<input type="button" id="btn1" value="move">
<ul id="ul2">
</ul>
</body>
</html>
